<template>
  <div class="background">
    <div id="login_box" class="login clear">
      <h2>宠物领养系统</h2>
      <el-form :model="formLabelAlign" :rules="rules" ref="loginForm" status-icon>
        <el-form-item label="账号" prop="phone">
          <el-input v-model="formLabelAlign.phone" placeholder="请输入账号/手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="formLabelAlign.pwd" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="denglu" type="primary" @click="submitForm('loginForm')">登录</el-button>
        </el-form-item>
        <div class="checkbox">
          <label for="rememberMe" @click="register"> 没有账号，<span class="registerStyle">注册</span> 一个?</label>
        </div>
      </el-form>
    </div>
    <div class="hello">
        你&emsp;&emsp;好&emsp;&emsp;！
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import { baseUrl } from '../store/baseUrl';
export default {
  name: 'Login',
  data() {
    var validatePhone = (rule, value, callback) => {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      if (!phoneReg.test(value)) {
        return callback(new Error('手机号格式不正确'));
      }
      callback();
    };
    var validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      formLabelAlign: {
        phone: '',
        pwd: ''
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: 'blur' }],
        pwd: [{ validator: validatePwd, trigger: 'blur' }]
      }
    };
  },
  methods: {
    register () { 
      this.$router.push('/register')
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post(`${baseUrl}/sysuser/login`, this.formLabelAlign)
            .then(response => {
              if (response.data.code === 200) {
                // 假设响应数据中包含用户名
              const name = response.data.data.name;
              this.$store.commit('SET_NAME', name);
                this.$message({
                  message: response.data.msg,
                  type: 'success',
                  duration: 1000
                });
                setTimeout(() => {
                  this.$router.push('/home/user');
                }, 1000);
              } else {
                this.$message({
                  message: response.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
            .catch(error => {
              console.error('There was an error!', error);
            });
        } else {
          this.$message({
            showClose: true,
            message: '校验信息格式不正确,请检查后再登录',
            duration: 1000,
            type: 'error'
          });
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
/* 通用样式 */
body, html {
  margin: 0;
  padding: 0;
  height: 100%; /* 设置body和html的高度为100%，确保背景图片覆盖整个视口 */
}

/* 背景图片 */
.background {
  background-image: url("../assets/R-C.gif");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover; /* 覆盖整个视口，自动缩放 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat;
}
.denglu{

  margin-top: 50px;
			width: 100%;
			height: 60px;
			border-radius: 20px;
			border: 0;
			color: #fff;
			text-align: center;
			line-height: 40px;
      font-weight: 400;
      font-size: 20px;
			background-image: linear-gradient(to bottom,#ffff00 ,#fbb450 );

}
/* 登录框样式 */
#login_box {
  width: 20%;
  height: auto;
  font-size: 25px;
  background-image: linear-gradient(white, #faf2cc);
  margin: 0;
  text-align: center;
  border-radius: 30px;
  border: 1px solid white;
  padding: 3% 5%;
  box-shadow: 5px 6px 10px #FFFFFF;
  position: absolute; /* 使用绝对定位 */
  top: 5%; /* 距离顶部的距离 */
  right: 3%; /* 距离右侧的距离 */
}

h2 {
  color: #000000;
  margin-top: 5%;
}

.login {
  border: none;
}

.checkbox {
  margin-top: 10px;
  height: 20px;
}
.registerStyle{
  color: #61a6f5;
  font-size: larger;
}
/* 欢迎语 */
.hello {
  position: absolute;
  top: 150px;
  left: 300px;
  font-size: 60px;
  font-family: "幼圆";
  font-weight: bolder;
  color: rgb(255, 255, 254);
  user-select: none;
  writing-mode: vertical-lr;
  align-items: center;
}
</style>